<template>
   <div class="search_input">
        <i class="search_icon"></i>
        <input type="text" placeholder="请输入关键词" v-model.trim="keyValue" ref="keyInput">
        <span class="cancle" v-show="cancleStatus" @click="cancleFn">取消</span>
   </div>
</template>
   
<script>
   export default {
       data () {
           return {
               keyValue:'',
               cancleStatus:false
           }
       },
       watch:{
           /**侦听输入框输入关键词，控制取消文本显隐 */
           keyValue(newValue,oldValue){
               if(newValue){
                   this.cancleStatus = true;
               }else{
                   this.cancleStatus = false;
               }
               console.log(newValue,oldValue)
           }
       },
       methods: {
           /**点击取消文本 */
           cancleFn(){
               this.keyValue = '';
           }
       },
       mounted() {
           console.log(this.$refs.keyInput)
           /**组件加载完毕后，输入框自动聚焦 */
           this.$refs.keyInput.focus()
       },
   }
</script>
   
<style scoped>
   .search_input{
       width: 90%;
       height: .8rem;
       background: #ebecec;
       border-radius: .4rem;
       margin: .4rem auto .4rem;
       display: flex;
       align-items: center;
   }
   .search_icon{
       display: block;
       width: .36rem;
       height: .36rem;
       background-image: url(/static/img/search.png);
        background-repeat: no-repeat;
        margin-left: .2rem;
        background-size: 100% 100%;
   }
   .search_input input{
       font-size: .32rem;
       flex: 1;
       margin-right: .2rem;
       height: 100%;
       background: transparent;
       border: none;
       outline: none;
       margin-left: .2rem;
   }
   .cancle{
       font-size: .32rem;
       color: #999;
       margin-right: .4rem;
   }
</style>